<template>
	<view class="">
		<view class="form-title">
			基本信息
		</view>
		<view class="form">
			<u--form labelPosition="left" ref="uForm" labelWidth="65">
				<u-form-item label="头像" borderBottom ref="item1" @click="userUp=true">
					<view class="avatar center">
						<image :src="avatar"></image>
					</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="姓名" borderBottom ref="item1" @click="showName=true">
					<view class="center">
						{{username || '请填写'}}
					</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="手机号" borderBottom ref="item1">
					<view class="center">
						{{mobile || ''}}
					</view>
					
				</u-form-item>
				<u-form-item label="性别" borderBottom ref="item1">
					<view class="center">
						<u-radio-group activeColor="#e7c5a5" v-model="sex" placement="row" @change="groupChange">
							<u-radio :customStyle="{marginRight: '8px'}"  label="男" :name="1"></u-radio>
							<u-radio :customStyle="{marginRight: '8px'}" label="女" :name="2">
							</u-radio>
						</u-radio-group>
					</view>
				
				</u-form-item>
				<u-form-item label="生日" borderBottom ref="item1">
					<view class="center" @click="showBirthday=true">
						{{birthday}}
					</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="地区" borderBottom ref="item1">
					<view class="center">
						<k-region :regionStr='regionStr' @region="getRegion"></k-region>
					</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="收货地址" borderBottom ref="item1" @click="toAddress">
					<view class="center">
						
					</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
		</view>
		<!-- 生日 -->
		 <u-datetime-picker
		                :show="showBirthday"
		                v-model="value1"
		                mode="date"
						@confirm="getBirthday"
						@cancel="showBirthday=false"
						:minDate="10"
		        ></u-datetime-picker>
		<!-- 头像 -->
		<user-popup :userUp.sync="userUp" :avatar.sync="avatar" :nickname.sync="nickname"></user-popup>
		<u-action-sheet @close="showAvatarList=false" :actions="list" cancelText='取消'  @getuserinfo="updateAvatar" :show="showAvatarList"></u-action-sheet>
		<!-- 姓名 -->
		<u-modal :show="showName" title="修改姓名" showCancelButton @confirm="dhCode" @cancel="showName=false">
			<view class="slot-content">
				<u--input
				    placeholder="请输入姓名"
				    border="surround"
				    v-model="realName"
				  ></u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {updateInfo,getUserInfo} from '@/api/my.js'
	import {KRegion} from '@/components/k-region/k-region.vue'
	import UserPopup from '@/components/userInfo-popup/user-popap.vue'
	
	export default {
		data() {
			return {
				avatar: "",
				username: "请填写",
				mobile:'',
				realName:"",
				sex: 1,
				birthday:'请选择',
				value1:"",
				showBirthday:false,
				diqu:'请选择',
				regionStr:"请选择省市区",
				list:[{name:'使用微信头像',openType: 'getUserInfo'}],
				showAvatarList:false,
				showName:false,
				userUp: false,
				nickname:""
			}
		},
		created() {
			this.getInfo()
		},
		components:{
			KRegion,
			UserPopup
		},
		methods: {
			dhCode(){
				if(!this.realName){
					uni.showToast({
						icon:'none',
						title:'请输入姓名'
					})
					return false
				}
				updateInfo({real_name:this.realName}).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:res.data
						})
						this.username = this.realName
						
					}
					this.showName = false
				})
			},
			getInfo(){
				getUserInfo({}).then(res=>{
					this.avatar = res.data.head_pic
					this.username = res.data.real_name
					this.mobile = res.data.bind_mobile
					this.sex = res.data.sex||1
					this.birthday = res.data.birthday||'请选择'
					this.regionStr = res.data.address||'请选择'
				})
			},
			async updateAvatar(e){
				const avatarUrl = await this.getUserInfo1(e)
				updateInfo({head_pic:avatarUrl}).then(res=>{
					this.getInfo()
					this.showAvatarList = false
				})
			},
			
			async getUserInfo1(e){
				return new Promise((resolve,reject)=>{
					const info = JSON.parse(e.rawData)
					resolve(info.avatarUrl)
				})
				
			},
			groupChange(e) {
				updateInfo({sex:e}).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:res.data
						})
					}
				})
			},
			//获取生日
			getBirthday(e){
				const date = e.value
				const year = new Date(date).getFullYear();
				const month = (new Date(date).getMonth() + 1).toString().padStart(2, '0');
				const day = new Date(date).getDate().toString().padStart(2, '0');
				this.birthday = `${year}-${month}-${day}`
				updateInfo({birthday:this.birthday}).then(res=>{
					this.showBirthday =false
					if(res.code==200){
						uni.showToast({
							title:res.data
						})
					}
				})
			},
		
			getRegion(e){
				this.regionStr = e
				updateInfo({address:this.regionStr}).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:res.data
						})
					}
				})
			},
			toAddress(){
				uni.navigateTo({
					url:'/package/address/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.form-title {
		background-color: #eee;
		padding: 12px;
		color: #999;
	}

	.form {
		padding: 0 12px;
	}

	.center {
		margin-left: 100rpx;
	}

	.avatar {
		width: 30px;
		height: 30px;
		overflow: hidden;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>